<template>
  <div id="app" :class="{ 'dark': isDark }">
    <router-view></router-view>
  </div>
</template>

<style>
*{
  margin:0;
  padding:0;
}
ul li{
  list-style: none;
}
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
  color: black;
}
</style>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { watchEffect } from 'vue';


const store = useStore();
const isDark = computed(() => store.state.theme === 'dark');

// 确保 Vuex store 中的 theme 状态已经被初始化
if (!store.state.theme) {
  store.commit('setTheme', 'light'); // 设置默认主题
}

// 创建一个计算属性来访问 Vuex store 中的 theme 状态
const theme = computed({
  get() {
    return store.state.theme;
  },
  set(newTheme) {
    store.commit('setTheme', newTheme);
  },
});

// 使用 watchEffect 监听 theme 的变化，并更新 document 的 data-theme 属性
watchEffect(() => {
  document.documentElement.setAttribute('data-theme', theme.value);
});
</script>
